<style>
.layout {
  border: none;
  /* background: #f5f7f9; */
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.layout-header-bar {
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.ivu-menu-vertical.ivu-menu-light:after {
  width: 0 !important;
}

.dev-run-preview .dev-run-preview-edit {
  display: none;
}
</style>
<template>
  <div class="Home-page">
    <div class="layout">
      <Sider
        :style="{
          position: 'fixed',
          height: '100vh',
          background: '#fff',
          border: 0,
          'box-shadow': '2px 0 8px 0 rgb(29 35 41 / 5%)',
          left: 0,
          overflow: 'auto',
        }"
      >
        <Menu
          :active-name="$route.name"
          theme="light"
          width="auto"
          :open-names="['1', '2', '3', '4']"
        >
          <Submenu name="1">
            <template #title>
              <Icon type="ios-navigate"></Icon>
              系统管理
            </template>
            <MenuItem name="用户管理" to="/system/user">用户管理</MenuItem>
            <MenuItem name="页面权限管理" to="/system/menu"
              >页面权限管理</MenuItem
            >
            <MenuItem name="角色管理" to="/system/role">角色管理</MenuItem>
          </Submenu>
          <Submenu name="2">
            <template #title>
              <Icon type="ios-keypad"></Icon>
              流程页面
            </template>
            <MenuItem name="原图审核" to="/process/audit">原图审核</MenuItem>
            <MenuItem name="提炼日文" to="/process/extract">提炼日文</MenuItem>
            <MenuItem name="翻译" to="/process/translate">翻译</MenuItem>
            <MenuItem name="嵌字" to="/process/inlay">嵌字</MenuItem>
          </Submenu>
          <Submenu name="3">
            <template #title>
              <Icon type="md-cloud-done" />
              查看漫画
            </template>
            <MenuItem name="已发布漫画" to="/published/comic"
              >已发布漫画</MenuItem
            >
          </Submenu>
          <!-- <Submenu name="4">
            <template #title>
              <Icon type="md-person" />
              个人中心
            </template>
            <MenuItem name="我发布的" to="/personal/posted">我发布的</MenuItem>
          </Submenu> -->
        </Menu>
      </Sider>
      <Layout :style="{ marginLeft: '200px' }">
        <Header
          class="header-layout"
          :style="{
            background: '#fff',
            boxShadow: '0 2px 3px 0px rgba(0,0,0,.1)',
          }"
        >
          <Button @click="viewImage" class="ivu-mr-16">生成图片</Button>
          <Dropdown class="ivu-mr-16">
            <a href="javascript:void(0)">
              常用导航菜单
              <Icon type="ios-arrow-down"></Icon>
            </a>
            <template #list>
              <DropdownMenu>
                <DropdownItem
                  v-for="(item, index) in navigationList"
                  :key="index"
                >
                  <a target="_blank" :href="item.link">{{ item.name }}</a>
                </DropdownItem>

                <!-- 	<Dropdown placement="right-start">
				  				<DropdownItem>
				  					找原图
				  					<Icon type="ios-arrow-forward"></Icon>
				  				</DropdownItem>
				  				<template #list>
				  					<DropdownMenu>
				  						<DropdownItem><a target="_blank" href="https://www.baidu.com/">xxxx</a>
				  						</DropdownItem>
				  						<DropdownItem><a target="_blank" href="https://www.baidu.com/">2222</a>
				  						</DropdownItem>
				  					</DropdownMenu>
				  				</template>
				  			</Dropdown> -->
              </DropdownMenu>
            </template>
          </Dropdown>

          <Dropdown @on-click="dropDownClick">
            <div class="header-item">
              <Avatar size="mini" :src="$store.state.sys.user.avatar"></Avatar>

              <div class="ivu-ml-8">{{ $store.state.sys.user.name }}</div>
              <div class="header-item-avatar">
                {{ $store.state.sys.user.accessType || "普通用户" }}
              </div>
            </div>
            <template #list>
              <DropdownMenu>
                <!-- <DropdownItem @click="goMyPosted">我发布的</DropdownItem> -->
                <DropdownItem name="logout">退出登陆</DropdownItem>
              </DropdownMenu>
            </template>
          </Dropdown>
        </Header>
        <Content :style="{ padding: '64px 16px 16px' }">
          <Breadcrumb :style="{ margin: '16px 0' }">
            <BreadcrumbItem
              :key="index"
              :to="item.path"
              v-for="(item, index) in breadList"
              >{{ item.name }}
            </BreadcrumbItem>
          </Breadcrumb>
          <div>
            <router-view />
          </div>
        </Content>
        <Footer class="layout-footer-center ivu-text-center"
          >2011-2022 &copy; fanyibao</Footer
        >
        <Drawer width="70%" v-model="showImage" :closable="false">
          <Row class="ivu-mt-16" :gutter="20">
            <Col :span="12">
              <img :src="showdata64" v-show="showdata64" style="width: 100%" />
            </Col>
            <Col :span="12">
              <Input
                type="textarea"
                v-model="showdata64"
                placeholder="请粘贴data64数据"
                :autosize="{ minRows: 3, maxRows: 8 }"
              ></Input>

              <Form :model="homeUpload">
                <FormItem label="标题">
                  <Input v-model="homeUpload.title"></Input>
                </FormItem>
                <FormItem label="副标题">
                  <Input v-model="homeUpload.episode_title"></Input>
                </FormItem>
                <FormItem>
                  <Button @click="upload">上传</Button>
                </FormItem>
              </Form>
            </Col>
          </Row>
        </Drawer>
      </Layout>
    </div>
  </div>
</template>
<script>
import { upload, get } from "@/utils/http";
export default {
  name: "HomeView",
  data() {
    return {
      breadList: [],
      showImage: false,
      showdata64: "",
      homeUpload: {
        title: "",
        episode_title: "",
      },
      navigationList: [],
    };
  },
  created() {
    this.getBreadcrumb();
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    },
  },
  mounted() {
    this.getNavigationList();
  },
  methods: {
    // 将base64转成文件
    dataURLtoFile(dataurl, filename) {
      let arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {
        type: mime,
      });
    },
    async upload() {
      let pageBlob = this.dataURLtoFile(this.showdata64);
      let params = new FormData();
      let fileOfBlob = new File([pageBlob], new Date().getTime() + ".jpg");
      params.append("file", fileOfBlob);
      for (const key in this.homeUpload) {
        const element = this.homeUpload[key];
        params.append(key, element);
      }
      for (const key in this.$store.state.sys.user) {
        const element = this.$store.state.sys.user[key];
        params.append(key, element);
      }
      const res = await upload("masterImageUpload.php", params);
      if (res) {
        this.$Message.success(res.status);
      }
    },
    async getNavigationList() {
      const res = await get("getNavigationList.php");
      if (res) {
        this.navigationList = res;
      }
    },
    async dropDownClick(name) {
      if (name === "logout") {
        const res = await get(
          `logout.php?user=${this.$store.state.sys.user.userId}`
        );
        if (res) {
          localStorage.clear();
          this.$router.push("/login");
        }
      }
    },
    getBreadcrumb() {
      if (Object.keys(this.$route.matched).length > 0) {
        this.breadList = this.$route.matched;
      } else {
        this.breadList = [];
      }
    },
    goMyPosted() {
      // this.$router.push("/personal/posted");
    },
    viewImage() {
      this.showImage = true;
    },
    downComic(
      blobText = null,
      dowFileName = "默认文件名",
      dowFileSuf = ".默认后缀"
    ) {
      return new Promise((resolve, reject) => {
        // 参数缺少
        if (!blobText) reject(new Error("下载文件失败-文件为空!"));
        const blob = new Blob([blobText]);
        if (blob.size > 0) {
          // 使用a标签模拟点击下载
          const elink = document.createElement("a");
          elink.download = `${dowFileName}.${dowFileSuf}`;
          // 给a标签设置属性
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          // 清空
          URL.revokeObjectURL(elink.href);
          document.body.removeChild(elink);
          // 下载成功
          resolve();
        } else {
          reject(new Error("下载文件失败-文件为空!"));
        }
      });
    },
  },
};
</script>

<style>
.header-layout {
  position: fixed;
  top: 0;
  width: calc(100% - 200px);
  left: 200px;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 100;
}

.header-item {
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.header-item-avatar {
  margin-left: 8px;
  font-size: 12px;
  color: gray;
}

.header-item:hover {
  background-color: #f8f8f9;
}
</style>
